<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>详情</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item class="left">
                    <div class="title">
                        <div class="name">{{ pageData.name }}</div>
                        <el-tooltip
                            v-if="Number(pageData.descriptionType) === 1"
                            effect="dark"
                            :content="pageData.description"
                            :disabled="!pageData.description"
                            placement="top">
                            <p class="description">
                                {{ pageData.description || "暂无描述" }}
                            </p>
                        </el-tooltip>
                        <p class="btn" v-if="pageData.descriptionType === 2" @click="showRichText">查看表单介绍</p>
                    </div>
                </page-search-item>
                <page-search-item class="right">
                    <el-button v-if="status !== '2'" @click="toCheck" type="primary" size="mini">确认</el-button>
                    <el-button @click="goBack" size="mini">取消</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <preview-template
            ref="previewTemplate"
            :key="key"
            v-if="show"
            @passVal="handleGetVal">
        </preview-template>
        <el-dialog
            title="表单介绍详情"
            :visible.sync="dialogVisible"
            width="30%"
            class="rich-dialog">
            <div>
                <p class="titleName"><span>标题:</span>{{ pageData.name }}</p>
                <div v-html="pageData.description" class="centent"></div>
            </div>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
import PreviewTemplate from "@/views/module-manage/src/components/preview-template/index.vue";

@Component({
    name: "DeclareHandleDetail",
    components: {
        PreviewTemplate
    }
})
export default class DeclareHandleDetail extends Vue {
    key = 0;
    dialogVisible = false;

    @Provide("dataForm")
    dataForm() {
        return this._dataForm;
    }

    _dataForm: any = {};
    show = false;

    pageData: any = {};
    status = ""

    created() {
        if (this.$route.query.dataFormId) {
            this.initData();
        } else {
            this.show = true;
        }
        this.status = this.$route.query.status.toString();
    }

    // 展示富文本
    showRichText() {
        this.dialogVisible = true;
    }

    async initData() {
        const res = await this.$server["moduleManage/collection/getDetail"]({
            data: {
                formId: this.$route.query.id,
                dataFormId: this.$route.query.dataFormId
            }
        });
        if (res.data.code === 200) {
            this._dataForm = res.data.data;
            this._dataForm.items.forEach((item: any) => {
                if (["1", "2", "3", "6", "7", "11", "12"].includes(item.valueKindId.toString())) {
                    item = {
                        ...item,
                        itemValue: item.itemValue || ''
                    };
                } else if (item.valueKindId.toString() === '4') {
                    item = {
                        ...item,
                        data: item.data || {}
                    };
                } else if (["5", "8", "9", "10"].includes(item.valueKindId.toString())) {
                    console.log(1111);
                    if (item.data) {
                        item.data.path.forEach((src: any) => {
                            if (src.includes(this.$staticUrl)) {
                                src = src.substring(this.$staticUrl.length);
                            }
                        });
                        console.log(item.data);
                    }
                    item = {
                        ...item,
                        data: item.data || []
                    };
                } else {
                    item = {
                        ...item,
                        data: item.data
                    };
                }
            });
            this.show = true;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    goBack() {
        this.$router.push({ name: "DeclareHandle" });
    }

    handleGetVal(val: any) {
        this.pageData = val;
    }

    toCheck() {
        this.$confirm("请确认填报内容无误，或上报内容已处置完毕。", "确认上报").then(async() => {
            const res = await this.$server["declare/checkData"]({
                data: {
                    id: this.$route.query.checkId
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功");
                this.status = "2";
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: #edeff2 !important;
        height: calc(100% - 50px) !important;
    }
    .pbb__search-column.fixed-column {
        height: 90px !important;
    }
}

.fixed-column {
    .title {
        width: 100%;
        // @include flexLayout(flex, normal, center);
        line-height: 36px;
    }
    .name {
        font-size: 16px;
    }
    .description {
        font-size: 14px;
        color: #c3c3c3;
        max-width: 620px;
        margin: 0;
        padding: 0;
        @include textEllipsis();
    }
}

.pbb__search-group {
    padding: 10px 18px;
    .title {
        display: flex;
        flex-direction: column;
    }
    .title p.description {
        font-size: 14px;
        max-width: 640px;
        @include textEllipsis();
    }
    .btn {
        font-size: 14px;
        color: #2c82c9;
        cursor: pointer;
        margin: 0;
        padding: 0;
        &:hover {
            text-decoration: underline;
        }
    }
}
.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 10px 20px;
            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0;
                margin-bottom: 10px;
            }
            .centent {
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }
}
</style>
